<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>作用域插槽</title>
</head>
<body>
    <div id="app" style="background-color: red;height: 500px;">
        <h1>我是父组件</h1>
        <child-tag :data="bookList">
            <template slot-scope="scope">
                <h1 v-if="scope.row.name == '水浒传'" style="color:red;">{{ scope.row.name }}</h1>
                <h1 v-else style="color:#000;">{{ scope.row.name }}</h1>
            </template>
        </child-tag>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    const child = {
        props: ['data'],
        template: `
            <div  style="background-color: pink">
                <div v-for="item in data">
                    <slot :row="item"></slot>
                </div>
            </div>
        `
    }
    const app = new Vue({
        el:'#app',
        data: {
            bookList: [
                {
                    name: '水浒传'
                },
                {
                    name: '三国演义'
                },
                {
                    name: '红楼梦'
                },
                {
                    name: '西游记'
                }
            ]
        },
        components:{
            'ChildTag': child
        }
    })

</script>
</html>